<template>
  <el-dialog
    :title="form.id?'编辑部门':'添加部门'"
    :visible="showDialog"
    width="40%"
    @close="close"
  >
    <!-- <span> -->
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="form.name" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="form.code" placeholder="请输入部门编码" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <!-- <el-input v-model="form.manager" placeholder="请选择部门负责人" /> -->
        <el-select v-model="form.manager" placeholder="请选择部门负责人" @focus="getAllManager">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="form.introduce" placeholder="请输入部门介绍" />
      </el-form-item>
    </el-form>
    <!-- </span> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addDept, getDepts, getDeptDetail, editDeptDetail } from '@/api/department'
import { getEmployeeSimple } from '@/api/employees'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    const validateName = async(rule, value, callback) => {
      const res = await getDepts()
      // console.log(res)
      // 编辑模式
      if (this.form.id) {
        // 如果同名
        if (this.oldName === value) {
          return callback()
        }
        // 不同名
        const result = res.depts.filter(item => item.pid === this.form.pid)
        result.some(item => item.name === value) ? callback(new Error(`${value}在同级重复了`)) : callback()
      } else {
        // 找到所有子级
        const result = res.depts.filter(item => item.pid === this.currentId)
        result.some(item => item.name === value) ? callback(new Error(`${value}在子级重复了`)) : callback()
      }
    }
    const validateCode = async(rule, value, callback) => {
      const res = await getDepts()
      if (this.form.id && this.oldCode === value) {
        return callback()
      }
      res.depts.some(item => item.code === value) ? callback(new Error(`${value}编码重复了`)) : callback()
    }
    return {
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空' },
          { validator: validateName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空' },
          { validator: validateCode, trigger: 'blur' }
        ]
      },
      options: '',
      oldName: '',
      oldCode: ''
    }
  },
  async created() {
    // this.getAllManager()
  },
  methods: {
    // 1.添加部门 和修改部门 都在一起处理
    async add() {
      await this.$refs.form.validate()
      if (this.form.id) {
        await editDeptDetail(this.form)
      } else {
        await addDept({ ...this.form, pid: this.currentId })
        this.$message.success('添加部门成功')
        //   this.$emit('getDeptList')
        // this.$emit('add')
      }
      // 关闭
      this.$emit('update:showDialog', false)
      // 提示消息
      this.$message.success(`${this.form.id ? '修改' : '添加'}成功`)
      // 重新渲染
      this.$emit('getDeptList')
    },
    // 2.获取所有负责人
    async getAllManager() {
      const res = await getEmployeeSimple()
      //   console.log(res)
      this.options = res
    },
    close() {
      this.$refs.form.resetFields()
      this.$emit('update:showDialog', false)
      // 重置 编辑的时候id 没清理掉
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
    },
    // 3.根据id 获取部门详情
    async getDeptDetail(id) {
      const res = await getDeptDetail(id)
      this.form = res
      this.oldName = res.name
      this.oldCode = res.code
    }
  }

}
</script>

<style>

</style>
